<template>
  <div class="doctorIntro">
    <navbar :text="text"></navbar>
    <div class="introduce">
      <div class="basicIntro">
        <div class="basicLeft">
          <h2>{{ text }}</h2>
          <p>
            <span>{{ job2 }}</span
            ><span>{{ job1 }}</span>
          </p>
          <button>执业点</button>
          <span>北京XXX医院</span>
        </div>
        <div class="basicRight">
          <img :src="img" alt="" />
          <button @click="followAciton(text)" v-text="follow"></button>
        </div>
      </div>
      <div class="ultraIntro">
        <p>{{ able }}</p>
      </div>
      <van-tabs
        type="card"
        title-active-color="green"
        title-inactive-color="black"
        color="transparent"
        @click="getintroAction"
      >
        <van-tab
          v-for="(item, index) in info"
          :key="index"
          :title="item"
        ></van-tab>
      </van-tabs>
    </div>
    <DoctorinfomationVue :id="id" :job2="job2"></DoctorinfomationVue>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { Tab, Tabs, Toast } from "vant";
import DoctorinfomationVue from "./Doctorinfomation.vue";
import {
  getFollowApi,
  addFollowApi,
  deleteFollowApi,
} from "../../../api/follow";
export default {
  components: {
    navbar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    DoctorinfomationVue,
  },
  data() {
    return {
      text: "",
      img: "",
      job1: "",
      job2: "",
      able: "",
      info: ["医生简介", "出诊信息"],
      id: 0,
      follow: "关注",
      state: false,
    };
  },
  created() {
    this.text = this.$route.params.text;
    this.img = this.$route.params.img;
    this.job1 = this.$route.params.job1;
    this.job2 = this.$route.params.job2;
    this.able = this.$route.params.able;
    this.getfollowAction(this.text);
  },
  watch:{
   state:function(){
    if (this.state) {
      this.follow = "已关注";
    } else {
      this.follow = "关注";
    }
   }
  },
  methods: {
    async followAciton(value) {
      if (this.follow == "关注") {
        try {
          this.follow = "已关注";
          await addFollowApi({ name: value });
          Toast(`感谢老铁关注${value}医生`);
        } catch (error) {
          console.log(error);
        }
      } else {
        try {
          this.follow = "关注";
          await deleteFollowApi({ name: value });
          Toast(`取消关注${value}医生`);
        } catch (error) {
          console.log(error);
        }
      }
    },
    getintroAction(index) {
      this.id = index;
    },
    async getfollowAction(value) {
      try {
        const { data } = await getFollowApi({ name: value });
        this.state = data.state;
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scope>
@function vw($px) {
  @return ($px/375) * 100vw;
}
* {
  margin: 0;
  padding: 0;
}
.internal {
  background: #fff;
}
.doctorIntro {
  height: 100%;
}
.introduce {
  position: absolute;
  top: vw(46);
  z-index: 1;
  width: 100%;
  height: vw(200);
  background: rgb(46, 199, 201);
  border-radius: 0 0 vw(20) vw(20);
  .basicIntro {
    margin-top: vw(15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .basicLeft {
      margin-left: vw(30);
      color: #fff;
      margin-bottom: vw(15);
      h2 {
        font-size: vw(18);
        margin-bottom: vw(15);
      }
      p {
        font-size: vw(12);
        margin-bottom: vw(15);
        span:last-child {
          margin-left: vw(46);
        }
      }
      span {
        font-size: vw(12);
      }
      button {
        margin-right: vw(30);
        background: #fff;
        color: #000;
        font-size: vw(12);
        border: none;
        width: vw(40);
        height: vw(20);
      }
    }
    .basicRight {
      margin-right: vw(30);
      margin-bottom: vw(15);
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        margin-bottom: vw(10);
      }
      button {
        width: vw(50);
        height: vw(20);
        border-radius: vw(10);
        border: none;
        background: #fff;
        color: rgb(0, 183, 93);
        font-size: vw(12);
      }
    }
  }
  .ultraIntro {
    padding: 0 vw(30) 0 vw(30);
    color: #fff;
    p {
      font-size: vw(12);
      margin-left: vw(36);
      line-height: 1.5;
      text-indent: vw(-36);
    }
  }
  .van-tabs {
    position: absolute;
    bottom: vw(-30);
    left: vw(20);
    color: #fff;
    .van-tabs__nav--card {
      width: vw(300);
      height: vw(45);
      border-radius: vw(10);
      border: vw(1) solid #cccccc70 !important;
    }
    .van-tabs__wrap {
      height: vw(45);
    }
    .van-tab {
      font-size: vw(14);
    }
    .van-tab:first-of-type {
      border-right: vw(1) solid #ccc !important;
    }
  }
}
</style>